﻿/**
 * accent colors
 * - orange (dark)  - #e44d26
 * - orange (mid)   - #f14a29
 * - orange (light) - #f16529
 * - blue (dark)    - #057
 * - blue (mid)     - #0092bf
 * - blue (light)   - #a6d9e9
 */

@import url(reset.css);

body {
	background:                              #f48454; /* old browsers (uses darker color) */ 
	background:    -moz-linear-gradient(top, #f7a37f 0%, #f16529 100%); /* ff3.6+ */
	background:        -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7a37f), color-stop(100%, #f16529)); /* chrome,safari4+ */
	background: -webkit-linear-gradient(top, #f7a37f 0%, #f16529 100%); /* chrome10+,safari5.1+ */
	background:      -o-linear-gradient(top, #f7a37f 0%, #f16529 100%); /* opera11.10+ */
	background:     -ms-linear-gradient(top, #f7a37f 0%, #f16529 100%); /* ie10+ */
	background:         linear-gradient(top, #f7a37f 0%, #f16529 100%); /* w3c */
	background-attachment: fixed;
	font-size:3em;
}
header, nav a, footer  { xbackground-color:#f14a29; xopacity:.5; position:absolute; }
header, footer         { text-align:center; width:100%; }
header                 { top:10%; }
header h1              { color:#e44d26; margin:0; }
header .html           { font-family:Arial Black,Impact,sans-serif; font-weight:bold; text-transform:uppercase; }
header .ver            {  }
header .today          { display:block; font-family:Scriptiva,Brush Script MT,Vladimir Script,script; font-weight:bold; text-transform:capitalize; }
nav a                  { color:#057; top:40%; text-decoration:none; text-transform:lowercase; }
nav a.read             { left:20%; }
nav a.play             { right:20%; }
footer                 { bottom:15%; }
footer ul              { list-style:none; margin:0; padding:0; }
footer li              { display:inline; }
footer span            { background-image:url(images/classes/96x.png); display:inline-block; height:96px; width:96px; }
footer .semantics span { background-position:0 0; }
footer .offstore  span { background-position:-96px 0; }
footer .device    span { background-position:-192px 0; }
footer .media     span { background-position:-288px 0; }
footer .graphics  span { background-position:-384px 0; }
footer .perfint   span { background-position:-480px 0; }
footer .connect   span { background-position:-576px 0; }
footer .styling   span { background-position:-672px 0; }


@media only screen and (min-width:480px) {
  /* style adjustments for viewports 480px and over go here */
}

@media only screen and (min-width:768px) {
  /* style adjustments for viewports 768px and over go here */
}
